<!-- 
  几个注意点
  0. 首页展示和我的展示是否要一样? 待定
      首页要展示用户名, 而我的不用
      首页用发布时间排序, 我的用记录时间排序
  1. 标题有才显示
  2. 视频记录首帧, 展示在图片后面是最好的方式, 但工作量大
      现在采用更多来下拉展示
			
	组件的状态图
	普通 （长按）显示按钮 （选择编辑）编辑模式
	    （展开）展开模式  
 -->
<script setup lang="ts">
import type { Log } from '@/env.d'
import { ref, provide } from 'vue'
import ViewerImgs from '../Utils/Viewer/ViewerImgs.vue'
import LogTags from './comps/LogTags.vue'

const { log } = defineProps<{ log: Log }>()
/** 是否展示按钮，元素左移 */
const showBtn = ref(false)
provide('log', log) // 暴露给子组件

const clickLog = () => {
  showBtn.value = false
}
</script>

<template>
  <view class="log">
    <view class="m" :class="{ showBtn }" :id="`log${log.id}`" @click="clickLog">
      <view class="content">{{ log.content }}</view>
      <!-- 图片和视频放在一起 -->
      <view class="block-media">
        <ViewerImgs />
      </view>
      <!-- 音频和文件 -->
      <view></view>

      <!-- Tags -->
      <LogTags noPublic />

      <!-- 页面底部：作者，时间 -->
      <view class="log-bottom">
        <view>{{ log.username }}</view>
        <view>{{ log.logtime.format('YYYY-MM-DD HH:mm') }}</view>
      </view>

      <!-- 给外部留的接口 -->
      <slot name="bottom"></slot>
    </view>
  </view>
</template>

<style scoped lang="scss">
.log {
  position: relative;
  width: 100%;
  padding: 0 $gap;

  .m {
    transition: 2s;
    padding: $padding;
    border-radius: $border-radius;

    display: flex;
    flex-direction: column;
    gap: 4px;

    .content {
    }

    .block-media {
    }

    .log-bottom {
      display: flex;
      flex-direction: row;
      font-size: 24rpx;
      color: $color-2;
      gap: 16rpx;
    }

    // 空div应该不占用gap
    & > view:empty {
      display: none;
    }
  }
  .showBtn {
    right: 100rpx;
  }
}
</style>
